<style>
    .project-edit-dlg {
        padding: 10px 10px 10px 0;
    }

    .project-edit-dlg .layui-form-label {
        width: 100px;
    }

    .project-edit-dlg .layui-input-block {
        margin-left: 130px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <div style="margin: 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">项目名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除</button>
            </div>
        </script>

        <table class="layui-hide" id="project-table" lay-filter="project-table-filter"></table>

        <script type="text/html" id="line-toolbar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>

<div id="project-edit-dlg" class="layui-hide">
    <div class="project-edit-dlg">
        <form class="layui-form" id="project-form" method="post" lay-filter="project-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" autocomplete="off" placeholder="请输入项目名称" class="layui-input"
                        lay-verify="required" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用例模板</label>
                <div class="layui-input-block">
                    <select name="caseTplId">
                        <option value="0">默认模板</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">缺陷模板</label>
                <div class="layui-input-block">
                    <select name="issueTplId">
                        <option value="0">默认模板</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="projectMark" placeholder="请输入内容" class="layui-textarea"
                        style="resize: none;"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">URL可重复</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="urlRepeat" lay-skin="switch" lay-text="是|否" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用例自定义 id</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="caseIdCustom" lay-skin="switch" lay-text="是|否" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">场景自定义 id</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="sceneIdCustom" lay-skin="switch" lay-text="是|否" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="project-form">确定</button>
                    <button id="project-form-btn-cancle" type="button" class="layui-btn layui-btn-primary">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['pluto', 'form', 'table', 'miniPage', 'element', 'layer', 'miniAdmin'], function () {
        const $ = layui.jquery
        const pluto = layui.pluto
        const form = layui.form
        const table = layui.table
        const miniPage = layui.miniPage
        const layer = layui.layer
        const miniAdmin = layui.miniAdmin

        table.render({
            elem: '#project-table',
            url: pluto.buildUrl('/sys/project/list'),
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            autoSort: false,
            skin: 'row',
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            request: {
                limitName: 'size',
            },
            parseData: (res) => {
                return pluto.transTableData(res)
            },
            cols: [[
                { type: "checkbox", width: 50 },
                { field: 'id', width: 80, title: 'id', hide: true },
                { field: 'name', width: 300, title: '名称' },
                { field: 'projectKey', width: 220, title: 'key' },
                { field: 'projectMark', width: 180, title: '备注' },
                { field: 'createTime', width: 180, title: '创建时间' },
                { title: '操作', minWidth: 150, toolbar: '#line-toolbar', align: "center" }
            ]]
        });

        /**
         * 打开编辑对话框
         * @param type add | edit
         * @param data 编辑时传行数据
         */
        const openFormDlg = (type, data) => {
            let renderData = { urlRepeat: '1' }
            if ('edit' === type) {
                renderData = pluto.request({ url: '/sys/project/detail/' + data.id })
                renderData.caseIdCustom
            }
            const title = 'add' === type ? '添加' : '编辑'

            const url = 'add' === type ? '/sys/project/add' : '/sys/project/edit'

            layer.open({
                title: title,
                type: 1,
                area: '600px',
                resize: false,
                content: $('#project-edit-dlg').html(),
                // content: $('#project-edit-dlg'),
                success: (layero, index) => {
                    layero.find('#project-form-btn-cancle').on('click', () => {
                        layer.close(index)
                    })
                    form.val('project-form', renderData)
                    form.render()
                    form.on('submit(project-form)', (formData) => {
                        let reqData = formData.field
                        if( 'edit' === type) {
                            reqData.id = data.id
                        }
                        
                        pluto.request({
                            url: url,
                            method: 'post',
                            data: reqData
                        })
                        if (pluto.isLastAjaxSuccess()) {
                            miniAdmin.success('编辑成功')
                            table.reload('project-table')
                            layer.close(index)
                        }

                        return false
                    })
                }
            })
        }

        table.on('toolbar(project-table-filter)', (obj) => {
            if ('add' === obj.event) {
                openFormDlg('add', null)
            }
        })

        table.on('tool(project-table-filter)', (obj) => {
            const data = obj.data
            const type = obj.event
            if ('edit' === type) {
                openFormDlg(type, data)
            }
        })

    });
</script>